<template>
	<div class="newsongrecommend">
		<!-- 固定在顶部的内容 -->
		<div class="nav-fd">
			<div class="get-App ">
				下载App
			</div>
			<div class="serch-logo ">
				<van-icon name="search" size="0.775rem" />
			</div>
		</div>
		<!-- 歌曲内容 -->
		<div class="music-information">
			<!-- 歌名部分 -->
			<div class="music-title">
				<p class="name">
					<span class="icon">
						标准
						<van-icon name="arrow-down" />
					</span>
					<span class="song">{{infogm}}</span>
				</p>
				<p class="name">{{infogmname}}</p>
			</div>
			<!-- 歌词部分 -->
			<div class="music-lyric van-picker-gai">
				<van-picker :columns="columns"  class="van-picker__mask-gai"/>
			</div>
			<!-- 小功能部分 -->
			<div class="music-func">
				<p class="content">
					<van-icon name="like-o paing" />
					<van-icon name="chat-o paing" />
					<van-icon name="back-top" class="back-top paing" />
				</p>
			</div>
			<!-- 播放按键 -->
			<div class="music-play">
				<audio :src="singsong" controls="controls" class="palyar">
				</audio>
			</div>
			<!-- 功能广告2 -->
			<div class="music-func2 dp-fl">
				<div class=" public-frame">高品质下载</div>
				<div class=" public-frame">手机铃声设置</div>
			</div>
		</div>
		<!-- 所属专辑 -->
		<div class="album">
			<div class="title">
				所属专辑
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img1" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogm}}<span>{{math1}}</span></p>
					<p>{{time}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider />
			<div class="song-sheet">
				<div class="fl-le title-font">
					<p>{{infogm}}</p>
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="back-top" />
				</div>
			</div>
		</div>
		<!-- 所属歌手 -->
		<div class="singer">
			<div class="title">
				所属歌手
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img2" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider>歌手其他热门专辑</van-divider>
			<van-swipe :loop="false" :width="120" :height="180" :show-indicators='false'>
				<van-swipe-item v-for="item,index in img3">
					<div class="album-module">
						<div class="module-img">
							<img :src="item.src" class="img">
						</div>
						<p class="name">{{item.name}}</p>
						<p class="time">{{item.time}}</p>
					</div>
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 结尾 -->
		<div class="footer">
			<div class="img">
				<img :src="img4">
			</div>
			<div class="font">打开APP，找到更好听的哥</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				math1:'(2首)',
				time:'2014-03-04',
				infogm:'爱情听说过没见过',
				infogmname:'高安',
				columns: ['*该歌词暂不支持自动滚动*',
				'《爱情听说过没见过》',
				'作词：高安',
				'作曲：高安',
				'演唱：高安',
				'开场白：',
				'女：你相信爱情吗？',
				'男：爱情就像鬼一样，听说过，从来没见过......',
				'你就像个影子飘来飘去',
				'我却抓不住你若即若离',
				'如果两颗心能真的在一起',
				'就让我为你、为你，为了你',
				'你的忽冷忽热带着情绪',
				'我的不知所措害怕失去',
				'如果真心能够换来真意',
				'想想你何必、何必、又何必',
				'爱情听说过 没见过',
				'为何付出那么多',
				'你说不快乐 不爱了',
				'也许你会忘记我',
				'爱情听说过，没见过',
				'为何情话那么多',
				'谎言像刺刀 伤了我',
				'就当从来没爱过',
				'就当从来没爱过......',
				],
				singsong:require('../assets/music/张韶涵-梦里花.mp3'),
				img1:require('../assets/homepage1/ChAKEl-s4xSAWltTAFvj_vh0Tz0573.jpg'),
				img2:require('../assets/homepage1/ChR461tM7H2AHSBGAAJFicHrkA4628.jpg'),
				img3:[
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'花桥流水',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'在心里从此永远有个你（对唱）',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'爱上你的全世界',time:'2017-03-23'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'红尘情歌',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'叹情歌',time:'2013-07-01'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'毒解药',time:'2018-10-21'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'我不是高富帅',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'毒解药',time:'2018-11-29'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'一生无悔（对唱）',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'在心里从此永远有个你',time:'2011-12-01'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'勿忘你',time:'2014-03-03'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'多情伤离别',time:'2013-01-29'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'忘不了曾经的你',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'今生爱上你',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'叹情歌',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'这一生的爱好好把握',time:'2015-06-30'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'爱情万万岁',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'又见老情人',time:'2014-03-04'},
					{src:require('../assets/homepage1/ChR47FvP6y-AFB04AALn3PJAk1c664.jpg'),name:'开门见喜',time:'2014-12-30'},
				],
				img4:require('../assets/homepage1/99e28d0.png'),
			}
		},
	}
</script>

<style scoped>
*{
	box-sizing: border-box;
}
.newsongrecommend{
	background-color: #eee;
	box-sizing: border-box;
}
	/* 固定在顶部的内容开始 */
.dp-fl{
	display: flex;
	justify-content: center;
}
.fl-le{
	float: left;
}
.fl-ri{
	float: right;
}
.nav-fd{
	position: fixed!important;
	background: url(../assets/homepage1/df8724c.jpg) no-repeat;
	width: 100%;
	height: 21.74vw;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 200;
	border-bottom: .5px solid #e0e0e0;
}
.get-App{
	padding: 0.2rem 0.175rem;
	width: 1.7rem;
	text-align: center;
	background: #e61723;
	color: #fafafa;
	font-style: normal;
}
.serch-logo{
	padding: .65rem;
}
.pd-le{
	padding-left: 0.625rem;
}
/* 固定在头部的内容结束 */
/* 歌名内容 */
.music-information{
	padding-top: 2.5rem;
	padding-left: .25rem;
	padding-right: .25rem;
	background: #f8f8f8;
}
.music-title{
	width: 100%;
}
.music-title .name{
	padding-bottom:0.1rem ;
	text-align: center;
	font-weight: 100;
	font-size: 0.25rem;
}
.music-title .name .icon{
	border: 1px solid #000000;
	padding: 0.0625rem 0.125rem;
	border-radius: 0.15rem;
	zoom: .7;
	font-weight: 700;
	font-size: .3rem;
}
.music-title .name .song{
	font-size: .45rem;
	font-weight: 700;
}
/* 歌词部分 */
.van-picker__mask{
	background-image: none !important;
}
.van-picker{
	background-color: #f8f8f8!important;
	opacity: .5;
	font-size: 0.3125rem;
}
.van-ellipsis{
	font-size: .4rem;
}
/* 功能部件 */
.music-func{
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
}
.music-func .content{
	text-align: center;
	zoom: 2;
}
.music-func .content .paing{
	padding: 0 .45rem;
	opacity: .6;
}
.music-func .content .back-top{
	transform: rotate(180deg);
}
/* 播放按键 */
.music-play{
	width: 100%;
}
.palyar{
	width: 100%;
	border: none;
	
}
.music-func2{
	width: 100%;
	height: 1.75rem;
	align-items: center;
}
.public-frame{
	width: 3.25rem;
	height: .95rem;
	background: #e13228;
	border-radius: 0.625rem;
	color: white;
	text-align: center;
	line-height: .95rem;
	margin: .25rem;
}
/* 所属专辑 */
.album{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.album .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.album .content-a{
	width: 100%;
	height: 2rem;
}
.album .content-a .title-img img{
	width: 1.75rem;
	height: 1.75rem;
}
.album .content-a .title-font{
	padding-left: 0.425rem;
}
.album .content-a .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .content-a .title-font p:nth-child(2){
	opacity: .5;
}
.album .content-a .title-font p span{
	font-size: 0.0625rem;
}
.album .content-a .title-icn{
	height: 1.75rem;
	line-height: 1.75rem;
	zoom: 1.3;
}
.album .song-sheet{
	width: 100%;
	height: 2rem;
}
.album .song-sheet .title-font{
	height: 2rem;
}
.album .song-sheet .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .song-sheet .title-font p:nth-child(2){
	opacity: .5;
}
.album .song-sheet .title-icn{
	height: 1rem;
	line-height: 1rem;
	transform: rotate(180deg);
	zoom: 1.6;
	opacity: .5;
}
.singer{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.singer .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.singer .content-a{
	width: 100%;
	height: 1.25rem;
}
.singer .content-a .title-img{
	width: 1.25rem;
}
.singer .content-a .title-img img{
	width: 100%;
	border-radius: 50%;
}
.singer .content-a .title-font{
	height: 1.25rem;
	line-height: 1.25rem;
	padding-left: .25rem;
}
.singer .song-sheet .title-font p{
	font-size: .45rem;
	padding-top: .35rem;
}
.singer .content-a .title-icn{
	height: 1.25rem;
	line-height: 1.25rem;
	zoom: 1.3;
}
/* 其他专辑模块 */
.album-module{
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-right: .25rem;
}
.album-module .module-img{
	width: 100%;
}
.album-module .module-img img{
	width: 100%;
}
.album-module .name{
	font-weight: 700;
}
.album-module .time{
	font-size: 0.15rem;
	opacity: .8;
}
.footer{
	width: 100%;
	padding: 50px 0;
	/* height: 3.5rem; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: white;
	margin-top: 0.225rem;
}
.footer .img img{
	width: 3rem;
}
.footer .font{
	width: 5.25rem;
	height: 1rem;
	background-color: #E13228;
	color: white;
	border-radius: 2.125rem;
	text-align: center;
	line-height: 1rem;
	margin-top: .225rem;
}
</style>
